<template>
  <div class="v-header" @dblclick="onWindowClick(windowSize==='min'?'max':'min')">
    <div class="_window-bar g-jc-sb g-pd-lr-8 g-ai-c">
      <div class="_window-logo">{{$t(title)}}</div>
      <div class="_window-btns g-jc-sb">
        <div  v-show="isSimMainWin" class="_window-btn g-pd-lr-4 g-pointer" :style="{ height: '100%' }">
          <m-dropdown>
            <img src="statics/icons/simulation/paramasSet.svg" alt="">
            <template #dropdown>
              <DropdownMenuItem @click="changeMenu('actRecordExport')">
                <p>{{$t('_act_record_export')}}</p>
              </DropdownMenuItem>
            </template>
          </m-dropdown>
        </div>
        <div v-if="isSimMainWin" class="_window-btn g-pd-lr-4 g-pointer" @click="onWindowClick('min')">
          <img src="statics/images/mainpage/wminsize.svg" />
        </div>
        <div v-if="isSimMainWin" class="_window-btn g-pd-lr-4 g-pointer" @click="onWindowClick('max')">
          <img :src="windowSize === 'max' ? 'statics/images/mainpage/wmidsize.svg' : 'statics/images/mainpage/wmaxsize.svg'" />
        </div>
        <div class="_window-btn _close-btn g-pd-lr-4 g-pointer" @click="onWindowClick('close')">
          <img src="statics/images/mainpage/wclose.svg" />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import * as remote from '@electron/remote';
import { controller } from "@/engine/Controller";

import { ref, onMounted, withDefaults, inject } from "vue";
import MDropdown from "../components/dropdown/Dropdown.vue";
import DropdownMenuItem from "../components/dropdown/DropdownMenuItem.vue";
import { SubWinName, WinName } from '@/engine/types/Win';
import { RouterName, router } from '@/views/router';
import { MessageChannelType } from '@/engine/types/Ipc';
import { useRoute } from 'vue-router';

const props = withDefaults(defineProps<{
  title?: string,
  isSimMainWin?: boolean,
}>(), {
  title: 'simwork',
  isSimMainWin: true,
});

const handleHeadClose = inject('handleHeadClose') as () => void;
const route = useRoute();
const windowSize = ref("mid");
const changeMenu = async (value: string) => {
  if (value === 'actRecordExport') {
    const exportWins = controller.winService.getSubWinsByName(SubWinName.ExportActPinData);
    if (!exportWins.length) {
      controller.winService.openPluginSubWin(
        RouterName.PinDataExport,
        { width: 1000, height: 600, skipTaskbar: true, title: SubWinName.ExportActPinData }
      );
    }
  }
};

const headerClose = () => {
  const win = remote.getCurrentWindow();
  if (props.isSimMainWin) {
    win.close();
  } else {
    win.hide();
  }
};

defineExpose({ headerClose });

const onWindowClick = (eventType: any) => {
  if (!app.global.isElectron) return;
  const win = remote.getCurrentWindow();
  if (eventType === "min") {
    win.minimize();
  } else if (eventType === "max") {
    if (win.isMaximized()) {
      win.unmaximize();
      windowSize.value = "mid";
    } else {
      win.maximize();
      windowSize.value = "max";
    }
  } else if (eventType === "close") {
    if (route.name == RouterName.Home) {
      controller.toolbarService.finishSimulation();
    }
    if (props.title === '_act_o_record') {
      if (handleHeadClose) {
        handleHeadClose();
      }
    } else {
      headerClose();
    }
  }
};

onMounted(() => {
  const win = remote.getCurrentWindow();
  if (!win) return;
  win.addListener('maximize', () => {
    windowSize.value = "max";
  });

  win.addListener('unmaximize', () => {
    windowSize.value = "min";
  });
});

</script>

<style lang="scss">
.v-header {
  height: 28px;
  -webkit-app-region: drag;
  ._window-bar {
    -webkit-app-region: drag;
    background: #3561A8;
    height: 28px;
    text-align: center;
    ._window-logo{
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      padding-left: 16px;
    }
    ._window-btns {
      -webkit-app-region: no-drag;
      border: 0;
      vertical-align: middle;
      -webkit-user-drag: none;
      ._window-btn {
        cursor: pointer;
        &:hover {
          background-color: #1f8aca;
        }
      }

    }
  }
}
</style>
